<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c{
                background-color: #444444;
            }
        </style>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script>
            // jQuery()
            // $(document).ready(function(){
            //     alert("Hello");
            // });


            $(function(){
                // alert("Hello");

                // alert(document.getElementById("h").innerHTML);

                // alert($("#h").html());

                // alert($("#h")[0].innerHTML);

                // alert($(document.getElementById("h")).html());

                $("#h").click(function(){
                    alert("Hello");
                });


                $("div:first").addClass("c");

                $("div p:even").css("background-color","#ff2222");
                $("div p:odd").css("background-color","#2222ff");



                $("#bigger").click(function(){
                    var fontSize=$("div:first").css("font-size");
                    $("div:first").css("font-size",parseInt(fontSize)+5+"px");
                });


                $("#smaller").click(function(){
                    var fontSize=$("div:first").css("font-size");
                    $("div:first").css("font-size",parseInt(fontSize)-5+"px");
                });

                $("#show").click(function(){
                    // $("div:first").css("display","block");
                    // $("div:first").show();
                    $("div:first").fadeIn(3000)
                });


                $("#hidden").click(function(){
                    // $("div:first").css("display","none");
                    // $("div:first").hide();
                    $("div:first").fadeOut(3000);
                });

                $("#move").click(function(){
                    $("#d1").animate({"left":"600px","width":"300px","height":"300px"},3000)
                            .animate({"top":"300px"},3000)
                            .animate({"left":"0px","top":"0px","width":"100px","height":"100px"},3000);

                    setTimeout($("#move").click(),9000)
                });


                $("#load").click(function(){
                    $("#i1").val("abc");
                    $("#image1").prop("src","../image/a.jpg");
                    $("#d2").html("<h1>Hello</h1>");
                    $("#d3").text("<h1>Hello</h1>");
                });

                $("#add").click(function(){
                    var s="<li>"+$("#t1").val()+"</li>";
                    $("#u1").append($(s));
                });

                $("#u1 li").click(function(){

                    // var l=$(this).clone();
                    var l=$(this).clone(true);
                    $("#u1").append(l);


                });

                var i=1;
                $("#more").click(function(){
                    var d=$("#fileDiv").clone(true);

                    d.prop("id","fileDiv"+i);



                    $(this).before(d);

                    // $("#fileDiv"+i+" input").val("");

                    $("input",d).val("");
                    i++;
                });

                $("a[name='delete']").click(function(){
                    // if( $("div:contains('文件')").length==1 ){
                    if( $("div:has(input[type='file'])").length==1 ){
                       return;
                    }
                    $(this).parent().remove();
                });

                $("#showValue").click(function(){


                    $("div input[type='file']").each(function(index,domElement){
                        console.log($(this).val());
                        console.log($(domElement).val());
                    });



                });

                $("#showForm").click(function(){
                    var values=$("#f").serialize();
                    console.log(values);
                });

                // $("#a1").click(function(event){
                //     console.log(event);
                //     alert(event.clientX+" "+event.clientY);
                // });
                var str="click mouseout";
                $("#a1").bind(str,function(){
                    alert("Hello");
                });
            });

        </script>
    </head>
    <body>
        <h1 id="h">Hello</h1>

        <hr/>

        <div>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
            <p>sadfsadfasdfsadfasdfsadfsdfa</p>
        </div>

        <input type="button" value="放大" id="bigger"/>
        <input type="button" value="缩小" id="smaller"/>
        <input type="button" value="显示" id="show"/>
        <input type="button" value="隐藏" id="hidden"/>

        <hr/>

        <input type="button" value="移动" id="move"/>

        <div id="d1" style="width: 100px;height: 100px;background-color: red;position: relative;"></div>

        <hr/>


        <a href="javascript:;" id="load">加载</a><br/>

        <input type="text" id="i1"/><br/>
        <img id="image1"><br/>
        <div id="d2"></div>
        <div id="d3"></div>


        <hr/>

        <input id="t1" type="text"/>
        <input type="button" value="追加" id="add"/>
        <ul id="u1">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>


        <hr/>


        <div id="fileDiv">
            文件：<input type="file"/><a name="delete" href="javascript:;">删除</a>
        </div>

        <input type="button" value="上传更多" id="more"/>

        <input type="button" value="显示文件名" id="showValue"/>



        <hr/>


        <form id="f" action="#">
            用户名：<input type="text" name="username"/><br/>
            密码：<input type="password" name="password"/><br/>
            电话：<input type="text" name="phone"/><br/>
        </form>

        <a href="javascript:;" id="showForm">显示表单数据</a>

        <hr/>

        <a href="javascript:;" id="a1">点击</a>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </body>
</html>